<template>
  <div>
    <video autoplay controls id="id__stream"></video>
  </div>
  <button id="start" @click="sta()">开始视频</button>
  <button id="stop" @click="st()">停止视频</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
import { onMounted } from 'vue'
onMounted(() => {
  //判断浏览器是否支持getUserMedia接口
  const navigator =
    window.navigator ||
    window.navigator.webkitGetUserMedia ||
    window.navigator.mozGetUserMedia ||
    window.navigator.msGetUserMedia
  navigator.getUserMedia ||
    (navigator.getUserMedia =
      navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia)
  if (navigator.getUserMedia) {
    console.log('your browser support getUserMedia')
  } else {
    console.log('your browser not support getUserMedia')
  }
})
//视频流约束条件，这里只获取视频流，不获取音频流
let constraints = { audio: false, video: true }
//获取视频流控件元素
let videoShowControl = document.getElementById('id__stream')
//开始获取视频流事件处理函数和停止视频流事件处理函数
const sta = () => {
  // 开始获取视频流
  navigator.getUserMedia(
    // 视频流约束条件
    constraints,
    // 获取视频流成功回调函数
    function (stream) {
      // 将视频流赋值给video控件的srcObject属性，这样就可以在页面上显示视频了
      videoShowControl.srcObject = stream
      // 保存视频流对象，以便后续操作使用
      window.stream = stream
    },
    // 获取视频流失败回调函数
    function (err) {
      // 获取视频流失败，打印错误信息到控制台
      console.log(err)
    }
  )
}
const st = () => {
  // 停止视频流播放，并释放资源
  videoShowControl.pause()
  // 停止视频流中的所有轨道，释放资源
  window.stream.getTracks().forEach(function (track) {
    // 停止轨道播放，释放资源
    track.stop()
  })
  router.go(-1)
}
</script>
<style>
video {
  width: 100%;
  height: 200px;
}
</style>
